<template>
  <div id="dd">
    <el-form ref="firstGuest" label-width="80px" style="width: 70%; margin: 0px auto" :rules="rules" :model="firstGuest">
        <el-form-item label="" style="width: 40%; margin: 0px auto">
          <el-input v-model="vip" placeholder="请输入VIP信息"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selvip" v-model="vipbtn" v-if="vipshow">查询</el-button>
        </el-form-item>
      <div id="d1">

        <el-form-item label="客户姓名" prop="guest_name">
          <el-input v-model="firstGuest.guest_name"></el-input>
        </el-form-item>
        <el-form-item label="客户性别" prop="guest_sex">
        <el-radio-group v-model="firstGuest.guest_sex" style="margin-left: 0px">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="客户电话" prop="guest_telephone">
          <el-input
            v-model="firstGuest.guest_telephone"
            type="staff_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="guest_idCard">
          <el-input
            v-model="firstGuest.guest_idCard"
            type="staff_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否会员" prop="guest_identity">
          <el-input
            v-model="firstGuest.guest_identity"
            type="staff_password"
          ></el-input>
        </el-form-item>

      </div>
      <div v-if="room_num == 2 || room_num == 3" id="d2">
        <el-form-item label="客户姓名">
          <el-input v-model="secondGuest.guest_name"></el-input>
        </el-form-item>
        <el-form-item label="客户性别" >
        <el-radio-group v-model="secondGuest.guest_sex" style="margin-left: 0px">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="客户电话">
          <el-input
            v-model="secondGuest.guest_telephone"
            type="staff_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="secondGuest.guest_idCard"
            type="staff_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否会员">
          <el-input
            v-model="secondGuest.guest_identity"
            type="staff_password"
          ></el-input>
        </el-form-item>
      </div>
      <div v-if="room_num == 3" id="d3">
        <el-form-item label="客户姓名">
          <el-input v-model="thirdGuest.guest_name"></el-input>
        </el-form-item>
        <el-form-item label="客户性别" >
        <el-radio-group v-model="thirdGuest.guest_sex" style="margin-left: 0px">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="客户电话">
          <el-input
            v-model="thirdGuest.guest_telephone"
            type="staff_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="thirdGuest.guest_idCard"
            type="staff_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否会员">
          <el-input
            v-model="thirdGuest.guest_identity"
            type="staff_password"
          ></el-input>
        </el-form-item>
      </div>
      <div id="d4">
        <el-form-item label="入住时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="record_in_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="退房时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="record_out_date"
            type="datetime"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd hh:mm:ss"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="money">计算金额</el-button>
        </el-form-item>
        <el-form-item label="总共消费" prop="moneyshow">
          <el-input
            v-model="firstGuest.moneyshow"
            type="staff_password"
          ></el-input>
        </el-form-item>
              <el-form-item>
        <el-button type="primary" @click="submitForm('firstGuest')" v-model="checkbtn" v-if="checkshow">登记入住</el-button>
        <el-button @click="resetForm('firstGuest')">重置</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          },
      },
      rules:{
        guest_name:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        guest_sex:[
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        guest_telephone:[
          { required: true, message: '请输入电话', trigger: 'blur' },
        ],
        guest_idCard:[
          { required: true, message: '请输入身份证号', trigger: 'blur' },
        ],
        guest_identity:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        moneyshow:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
      },      
      vipbtn:'50',
      vipshow:false,
      checkbtn:'43',
      checkshow:false,
      firstGuest: {
        guest_name: "",
        guest_sex: "",
        guest_telephone: "",
        guest_idCard: "",
        guest_identity: "否",
        moneyshow:"",
      },
      secondGuest: {
        guest_name: "",
        guest_sex: "",
        guest_telephone: "",
        guest_idCard: "",
        guest_identity: "否",
      },
      thirdGuest: {
        guest_name: "",
        guest_sex: "",
        guest_telephone: "",
        guest_idCard: "",
        guest_identity: "否",
      },
      formLabelWidth: '120px',
      room_num: "",
      room_id: "",
      room_code: "",
      record_in_date:"",
      record_out_date:"",  
      vip:""
    };
  },
  methods: {
    locaData() {
      this.room_id = this.$route.params.rid;
      this.room_num = this.$route.params.rnum;
      this.room_code = this.$route.params.rcode;
      setTimeout(() => {
      //设置默认选中项
        this.login();
      }, 0);
    },
    submitForm(firstGuest){
      this.$refs[firstGuest].validate((valid) => {
          if (valid) {
            this.go();
          } else {
            return false;
          }
        });
    },
    go() {
      this.$axios
        .post("/checkin/guest", {
          firstGuest: this.firstGuest,
          secondGuest: this.secondGuest,
          thirdGuest: this.thirdGuest,
        })
        .then((res) => {
          if (res.data.status == 1000) {
            this.save();
          }
        })
        .catch((error) => {});
    },
    resetForm(firstGuest) {
      this.$refs[firstGuest].resetFields();
    },
    back(){
      this.$router.push("/Room");
    },
    money(){
        this.$axios.post("/checkin/money",{
            room_id:this.room_id,
            record_in_date:this.record_in_date,
            record_out_date:this.record_out_date
        }).then(res=>{
            if(res.data.status == 1000){
                this.firstGuest.moneyshow=res.data.data;
            }

        }).catch(error=>{});
    },
    save() {
      this.$axios
        .post("/checkin/save", {
          room_id: this.room_id,
          room_code: this.room_code,
          record_in_date:this.record_in_date,
          record_out_date:this.record_out_date,
          moneyshow:this.firstGuest.moneyshow,
          guest_telephone1: this.firstGuest.guest_telephone,
          guest_telephone2: this.secondGuest.guest_telephone,
          guest_telephone3: this.thirdGuest.guest_telephone,
          staff_telephone: sessionStorage.getItem("user"),
        })
        .then((res) => {
          if (res.data.status == 1000) {
            this.$router.push("/Room");
            this.firstGuest.guest_name = "";
            this.firstGuest.guest_sex = "";
            this.firstGuest.guest_telephone = "";
            this.firstGuest.guest_idCard = "";
            this.firstGuest.guest_identity = "";
            this.firstGuest.moneyshow = "",
            this.secondGuest.guest_name = "";
            this.secondGuest.guest_sex = "";
            this.secondGuest.guest_telephone = "";
            this.secondGuest.guest_idCard = "";
            this.secondGuest.guest_identity = "";
            this.thirdGuest.guest_name = "";
            this.thirdGuest.guest_sex = "";
            this.thirdGuest.guest_telephone = "";
            this.thirdGuest.guest_idCard = "";
            this.thirdGuest.guest_identity = "";
          this.setReStatus(this.room_code)
          }
        })
        .catch((error) => {});
    },
    selvip(){
      this.$axios.get("/checkin/vip/"+this.vip)
      .then(res=>{
        this.firstGuest.guest_name = res.data.data.vip_name;
        this.firstGuest.guest_telephone = res.data.data.vip_telephone;
        this.firstGuest.guest_idCard = res.data.data.vip_idcard;
        this.firstGuest.guest_identity = "是";
      }).catch(error=>{})
    },
    //设置预定状态
    setReStatus(code){
      this.$axios
        .get("/setRestatus" ,{
          params:{
            room_code:code,
          }
        })
        .then(res=>{


        }).catch(error=>{

      })
    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.vipbtn){
          this.vipshow = true;
        }
        if(item == this.checkbtn){
          this.checkshow = true;
        }
      })
    }
  },
  mounted() {
    this.locaData();
  },
};
</script>

<style>
 #d1 {
   border: 00px solid blue;
   float: left;
 }
  #d2 {
    border: 0px solid yellow;
   float: left;
 }
  #d3 {
    border: 0px solid green;
   float: left;
 }
   #d4 {
     border: 0px solid red;
     margin-top: 50px;
   height: 150px;
   float: right;
 }
    #dd {
      height: 60%;
     border: 0px solid black;
   height: 750px;
   text-align: center;
 }
</style>
